/*body {        !*背景*!*/
/*    background: url("static/images/3.jpg") no-repeat;*/
/*    background-size: 100% 130%;*/
/*}*/
body {        /*背景*/
    background-image: url('../images/3.jpg');
    background-size: 100% 110%;
}
a{
    text-decoration: none;
}
#box1 {
    width: 580px;
    height:240px;
    background-image:radial-gradient(rgb(0,205,245,0.9),rgb(0,205,245,0.02));
    /*left:300px;*/
    margin: auto; /*边界距离*/
    text-align: center;
    border-radius: 10px;/*边界半径*/
    padding: 50px 50px;
    display: inline-block;/*并排显示*/
}
#box2 {
    width: 580px;
    height:240px;
    background-image:radial-gradient(rgb(5,245,205,1.1),rgb(5,245,205,0.02));
    margin: auto;
    text-align: center;
    border-radius: 10px;
    padding: 50px 50px;
    display:inline-block;
}
#box0 { /*表格为块级元素不内连*/
    margin-left: auto;
    margin-right: auto;}

.seller{
    font-size:xxx-large;
    color: white;
}
.seller:hover{/*鼠标滑过变色*/
    color: rgb(5,150,255);
}
.buyer {
    font-size: xxx-large;
    color: white;
}
.buyer:hover{/*鼠标滑过变色*/
    color: rgb(5,150,255);
}
h3{
    font-color: black;
    font-size: 70px;
    text-align: center;
}
h4{
    font-color: black;
    font-size: 70px;
    text-align: center;
}
/*------------------------------动效-----------------------------------------------------*/
#box1 {
    -webkit-animation: fadelogIn 1.2s;
    animation: fadelogIn 1.2s;
}
#box2 {
    -webkit-animation: fadelogIn 1.2s;
    animation: fadelogIn 1.2s;
}

@keyframes fadelogIn {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes fadelogIn {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
    }
    100% {
        -webkit-transform: none;
    }
}
